"use strict";

import React from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, TouchableOpacity, TouchableHighlight, View, Image, Dimensions, PixelRatio, Text} from 'react-native';
import ListView from 'deprecated-react-native-listview'
import Color from '../../config/theme/standard/color';
import Fonts from '../../config/theme/standard/fonts';

let fontScale = PixelRatio.getFontScale();
let pixelRatio = PixelRatio.get();
// 高保真的宽度和高度
const designWidth = 750.0;
const designHeight = 1334.0;

export function setSpText(size) {
    let screenW = Dimensions.get('window').width;
    let screenH = Dimensions.get('window').height;
    const scaleWidth = screenW / designWidth;
    const scaleHeight = screenH / designHeight;
    const scale = Math.min(scaleWidth, scaleHeight);
    size = Math.round(size * scale/fontScale + 0.5);
    return size;
}

export function scaleSizeH(size) {
    let screenH = Dimensions.get('window').height;
    // 根据dp获取屏幕的px
    let screenPxH = PixelRatio.getPixelSizeForLayoutSize(screenH);
    const scaleHeight = size * screenPxH / designHeight;
    size = Math.round((scaleHeight / pixelRatio + 0.5));
    return size;
}

export function scaleSizeW(size) {
    let screenW = Dimensions.get('window').width;
    // 根据dp获取屏幕的px
    let screenPxW = PixelRatio.getPixelSizeForLayoutSize(screenW);

    const scaleWidth = size * screenPxW / designWidth;
    size = Math.round((scaleWidth/pixelRatio + 0.5));
    return size;
}

const ds = new ListView.DataSource({rowHasChanged: (r1,r2)=>(r1!==r2)});

class NewsList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {//设置初值
            dataSource: ds.cloneWithRows(this.props.list),
            isWideScreen: false
        };
    }

    componentDidMount() {
        // 适配鸿蒙折叠屏动态更新组件
        this.addEventListenerScreenWidth = Dimensions.addEventListener('change', this.setIsWideScreen)
    }
    componentWillUnmount() {
        // 适配鸿蒙折叠屏动态更新组件
        if (this.addEventListenerScreenWidth) {
            this.addEventListenerScreenWidth = null
        }
    }
    setIsWideScreen = () => {
        const screenWidth = Dimensions.get('window').width;
        // 不修改dataSource ListView不重新渲染
        const dataTemp = JSON.parse(JSON.stringify(this.props.list))
        if (screenWidth) {
            this.setState({
                isWideScreen: screenWidth > 500 && screenWidth < 800,
                dataSource: ds.cloneWithRows(dataTemp)
            })
        }
    }

    componentWillReceiveProps(nextProps) {
        const dataTemp = JSON.parse(JSON.stringify(nextProps.list))
        if (nextProps.list !== this.props.list) {
            this.setState({ dataSource: ds.cloneWithRows(dataTemp) });
        }
    }

    renderRow(rowData) {
        const separatorStyle =  [styles.separator];
        const rowContainerStyle = [styles.rowContainer];
        const labelContainer = [styles.labelContainer];

        labelContainer.push({
            width: Dimensions.get('window').width-15-20-20-90,
        })
        let separator = <View style={separatorStyle}/>;

        let row;

        let badge;
        if(rowData.badge) {
            badge =  <View style={[styles.badgeContainer, rowData.badgeContainerStyle]}>
                <Text style={[styles.badge, {color: rowData.badgeTextColor ? rowData.badgeTextColor :Color.newsList.badgeText}]}>{rowData.badge}</Text>
            </View>
        } else {
            badge = null
        }

        let desc;
        if(rowData.desc) {
            desc =  <View style={styles.descContainer}>
                <Text style={[styles.desc, rowData.descStyle]}>{rowData.desc}</Text>
            </View>
        } else {
            desc = null
        }

        let leftContainer; let rightContainer;
        leftContainer = <View style={{flexDirection: 'column'}}>
            <View style={labelContainer}>
                <Text style={styles.label} numberOfLines={2}>
                    {rowData.text}
                </Text>
            </View>
                <View style={styles.content}>
                {badge}
                {desc}
            </View>
        </View>;

        if(rowData.image) {
            rightContainer = <Image source={rowData.image} style={styles.image}/>;
        } else {
            rightContainer = null;
            labelContainer.push({width: Dimensions.get('window').width - 30});
            rowContainerStyle.push({paddingRight: 15, paddingLeft: 15})
        }
        
        if (this.props.imageRight == false && rowData.image) {
            rowContainerStyle.push({paddingRight: 15, paddingLeft: 20})
        }
        row = (
            <TouchableOpacity activeOpacity={0.8} onPress={rowData.onPress}>
                {this.props.imageRight ?
                    <View style={[rowContainerStyle]}>
                        {leftContainer}
                        {rightContainer}
                    </View> :
                    <View style={[rowContainerStyle]}>
                        {rightContainer}
                        {leftContainer}
                    </View>
                }
            </TouchableOpacity>
        );

        return (
            <View>
                {row}
                {separator}
            </View>
        );
    }

    render() {
        return (
            <View>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(rowData) => this.renderRow(rowData)}
                />
            </View>
        );
    }
}

NewsList.propTypes = {
    list: PropTypes.array.isRequired,
    badgeContainerStyle: PropTypes.any,
    badgeTextColor: PropTypes.string,
    imageRight: PropTypes.bool,
};

NewsList.defaultProps = {
    list: [''],
    imageRight: true
};

const styles = StyleSheet.create({
    rowContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        paddingTop: 16,
        paddingBottom: 12,
        paddingLeft: 15,
        paddingRight: 20,
    },

    labelContainer: {
       // width: Dimensions.get('window').width - scaleSizeW(90) - scaleSizeW(208)
        //    width: Dimensions.get('window').width-15-20-20-90,
    },

    label: {
        color: Color.newsList.label,
        fontSize:Fonts.newsList.labelFontSize,
        fontWeight:'600',
        lineHeight: 22,
        textAlign: 'justify'
    },

    separator: {
        height: 1/PixelRatio.get(),
        backgroundColor: Color.newsList.borderColor,
        marginHorizontal: 15,
    },

    image: {
        width:90,
        height:60,
        borderRadius: 3,
        resizeMode: 'stretch'
    },

    content: {
        flexDirection: 'row',
        marginTop: 13,
    },

    badgeContainer: {
        alignSelf: 'flex-start',
        backgroundColor: Color.newsList.bageBackground,
        paddingHorizontal: 4,
        paddingVertical: 4,
        borderRadius: 2,  
        marginRight: 8,
    },

    badge: {
        fontSize:Fonts.newsList.badgeFontSzie
    },

    descContainer: {
        alignSelf: 'flex-start',
        paddingVertical: 1,
    },

    desc: {
        color: Color.newsList.desc,
        fontSize:Fonts.newsList.descFontSize,
      
    }
});

module.exports = NewsList;
